// mixin
@mixin response($level: 1) {
  @if ($level == 1) {
    @media screen and (max-width: $screenBorder1) {
      @content;
    }
  } @else if($level == 2) {
    @media screen and (min-width: $screenBorder1) and (max-width: $screenBorder2) {
      @content;
    }
  } @else if($level == 3) {
    @media screen and (min-width: $screenBorder2) and (max-width: $screenBorder3) {
      @content;
    }
  } @else if($level == 4) {
    @media screen and (min-width: $screenBorder3) {
      @content;
    }
  }
}

@mixin absolute($vertical: top, $verNum: 0, $horizontal: left, $horNum: 0) {
  position: absolute;
  #{$vertical}: $verNum;
  #{$horizontal}: $horNum;
}

@mixin fixed($vertical: top, $verNum: 0, $horizontal: left, $horNum: 0) {
  position: fixed;
  #{$vertical}: $verNum;
  #{$horizontal}: $horNum;
}

@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin full {
  width: 100%;
  height: 100%;
}

@mixin round($d: 20px) {
  width: $d;
  height: $d;
  border-radius: 50%;
}

@mixin content {
  content: "";
  display: block;
}
